<template>

  <div class="txt2"> 已经观看的课程</div>

  <div class="keboss">

  <el-row :gutter="11">
   <el-col :span="5"><div class="ke">
     <el-row :gutter="11">
       <el-col :span="6"><div class="txt">c++ </div></el-col>
       <el-col :span="6"><div class="jindu">  <el-progress :percentage="100" :format="format"></el-progress> </div></el-col>
     </el-row>
   </div>
   </el-col>

    <el-col :span="5"><div class="ke">
      <el-row :gutter="11">

        <el-col :span="6"><div class="txt">c++ </div></el-col>
        <el-col :span="6"><div class="jindu">  <el-progress :percentage="100" :format="format"></el-progress> </div></el-col>
      </el-row>
    </div></el-col>
    <el-col :span="5"><div class="ke">
      <el-row :gutter="11">
        <el-col :span="6"><div class="txt">c++ </div></el-col>
        <el-col :span="6"><div class="jindu">  <el-progress :percentage="100" :format="format"></el-progress> </div></el-col>
      </el-row>
    </div></el-col>
    <el-col :span="5"><div class="ke">
      <el-row :gutter="11">
        <el-col :span="6"><div class="txt">c++ </div></el-col>
        <el-col :span="6"><div class="jindu">  <el-progress :percentage="100" :format="format"></el-progress> </div></el-col>
      </el-row>
    </div></el-col>
  </el-row>
  </div>


</template>

<script>
// <el-row :gutter="20">
// <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
// <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
// <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
// <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
// </el-row>
export default {
  methods: {
    format(percentage) {
      return percentage === 100 ? '完成啦' : `${percentage}%`;
    }
  }
};
</script>

<style scoped>
.jindu{
  width: 110px;
}
.txt{
  font-size: 1rem;
  color: black;
}
.ke{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: blanchedalmond;
  border-radius: 10px;
  width: 170px;
  height: 50px
}
.txt2{
  margin-top: 4%;
  margin-bottom: 2%;
  font-size: 1.2rem;
  color: black;
}
.keboss{
  left: auto;
  margin-left: 6%;
}
</style>
